<template>
	<el-container direction="vertical">
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="curComponent">
				<el-tab-pane
					v-for="item in tagList"
					:key="item.component"
					:label="item.label"
					:name="item.component"
				></el-tab-pane>
			</el-tabs>
		</el-header>
		<keep-alive :max="10">
			<component
				:is="curComponent"
				v-bind="curTag.props ?? {}"
				v-on="curTag.on ?? {}"
			/>
		</keep-alive>
	</el-container>
</template>

<script>
import { ref, computed } from "vue";
import plan from "./components/plan/index.vue";
import underway from "./components/underway/index.vue";
import finished from "./components/finished/index.vue";

export default {
	name: "components",
	components: {
		plan,
		underway,
		finished,
	},
	setup() {
		const tagList = [
			{
				label: "计划班级",
				component: "plan",
			},
			{
				label: "正在进行班级",
				component: "underway",
			},
			{
				label: "已结束班级",
				component: "finished",
			},
		];

		const curComponent = ref("plan");
		const curTag = computed(() => {
			return tagList.find(
				(item) => item.component === curComponent.value
			);
		});
		return {
			tagList,
			curComponent,
			curTag,
		};
	},
};
</script>

<style></style>
